<template>
    <div class="singerList">
        <index-list :indexList="indexList" v-if="flag"></index-list>
    </div>
</template>

<script>
    import { getAllSinger } from "../utils/index";
    import IndexList from "../components/IndexList.vue";
    export default {
        name: "SingerList",
        data() {
            return {
                indexList: [],
                flag: false,
            };
        },
        components: {
            IndexList,
        },
        created() {
            // 获取歌手列表数据
            this.getSingerList();
        },
        mounted() {},
        methods: {
            getSingerList() {
                // 获取歌手列表数据方法
                getAllSinger()
                    .then((res) => {
                        console.log(res)
                        console.log("====")
                        this.indexList = res;
                        /**
                         * 通过flag来确保传值后再加载组件
                         * 避免出现空值过去的情况
                         */
                        this.flag = true;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
        },
    }
</script>

<style  lang="scss" scoped>
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .song-list {
        .song-list-header {
            display: flex;
            overflow: auto;
            width: 100%;
            margin-bottom: .25em;
            .song-list-header-button {
                margin: 0.25em;
                flex-shrink: 0;
            }
            // 按钮激活的状态
            .active {
                color: #fff;
                background-color: #26a2ff;
            }
        }
    }
</style>
